<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="user-scalable=0" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.web {
				display: none;
				position: relative;
				overflow: hidden;
				background: url(img/Mc_bg_game.jpg)no-repeat;
				background-size: cover
			}
			
			.person {
				position: absolute;
				bottom: -200px;
				overflow: hidden;
			}
			
			.timeLeft {
				width: 400px;
				height: 120px;
				position: absolute;
				left: 30px;
				top: 20px;
				background: url(img/Mc_bg_time.png)no-repeat;
				background-size: cover;
			}
			
			span {
				position: absolute;
				right: 35px;
				top: 25px;
				font-size: 55px;
				color: white
			}
			
			.scoreRight {
				width: 400px;
				height: 120px;
				position: absolute;
				top: 20px;
				right: 30px;
				background: url(img/Mc_bg_score.png)no-repeat;
				background-size: cover;
			}
			
			.start {
				/*				display:none;*/
				background: url(img/Mc_bg_open.jpg)no-repeat;
				background-size: cover;
				overflow: hidden;
				position: relative;
				/*display: none;*/
			}
			
			.jingxi {
				display: inline-block;
				width: 90%;
				position: absolute;
				top: 120px;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.jingxi img {
				width: 100%;
			}
			
			.jingyu {
				display: inline-block;
				width: 85%;
				position: absolute;
				top: 590px;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.jingyu img {
				width: 100%;
			}
			
			.shuimu {
				display: inline-block;
				width: 30%;
				position: absolute;
				bottom: 410px;
				right: -55px;
			}
			
			.shuimu img {
				width: 100%;
			}
			
			.haixing {
				display: inline-block;
				width: 30%;
				position: absolute;
				bottom: 410px;
				left: -30px;
			}
			
			.haixing img {
				width: 100%;
			}
			
			.logo {
				display: inline-block;
				width: 50%;
				position: absolute;
				top: 50px;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.logo img {
				width: 100%;
			}
			
			.kaishi {
				display: inline-block;
				width: 40%;
				position: absolute;
				/*bottom: 250px;*/
				left: 50%;
				animation: ks 0.8s;
				animation-fill-mode: forwards;
				transform: translateX(-50%);
			}
			
			@keyframes ks {
				0% {
					bottom: -300px;
				}
				50% {
					bottom: 300px;
				}
				100% {
					bottom: 250px;
				}
			}
			
			.kaishi img {
				width: 100%;
			}
			
			.guize {
				display: inline-block;
				width: 40%;
				position: absolute;
				bottom: 100px;
				left: 28%;
				transform: translateX(-50%);
				animation: gz 1.2s;
				animation-fill-mode: forwards;
			}
			
			.guize img {
				width: 100%;
			}
			
			@keyframes gz {
				0% {
					bottom: -300px;
				}
				50% {
					bottom: 150px;
				}
				100% {
					bottom: 100px;
				}
			}
			
			.paiming {
				display: inline-block;
				width: 40%;
				position: absolute;
				bottom: 100px;
				right: 28%;
				transform: translateX(50%);
				animation: pm 1.2s;
				animation-fill-mode: forwards;
			}
			
			.paiming img {
				width: 100%;
			}
			
			@keyframes pm {
				0% {
					bottom: -300px;
				}
				50% {
					bottom: 150px;
				}
				100% {
					bottom: 100px;
				}
			}
			
			.two {
				background: url(img/Mc_bg_menu.jpg)no-repeat;
				background-size: cover;
				overflow: hidden;
				position: relative;
				display: none;
			}
			
			.man {
				width: 40%;
				position: absolute;
				top: 24%;
				right: 4%;
			}
			
			.man img {
				width: 100%;
			}
			
			.woman {
				width: 52%;
				position: absolute;
				top: 44.5%;
				left: 4%;
			}
			
			.woman img {
				width: 100%;
			}
			
			.man1 {
				width: 43%;
				position: absolute;
				top: 23.5%;
				right: 2.5%;
				opacity: 0;
			}
			
			.man1 img {
				width: 100%;
			}
			
			.woman1 {
				width: 54%;
				position: absolute;
				top: 44%;
				left: 3%;
				opacity: 0;
			}
			
			.woman1 img {
				width: 100%;
			}
			
			.zhantai {
				width: 42%;
				position: absolute;
				top: 44%;
				right: 0;
			}
			
			.zhantai img {
				width: 100%;
			}
			
			.play {
				width: 35%;
				position: absolute;
				bottom: 11%;
				right: 2%;
			}
			
			.play img {
				width: 100%;
			}
			
			.guizeMask {
				display: none;
				background: url(img/Mc_bg_rule.png)no-repeat;
				background-size: cover;
				width: 90%;
				height: 76%;
				position: absolute;
				top: 10%;
				left: 5%;
			}
			
			.close {
				width: 20%;
				position: absolute;
				right: 0;
				top: -5%;
			}
			
			.close img {
				width: 100%;
			}
			
			.close1 {
				width: 20%;
				position: absolute;
				right: 0;
				top: -2%;
			}
			
			.close1 img {
				width: 100%;
			}
			
			.neirong {
				padding: 0 7%;
				overflow: auto;
				width: 70%;
				height: 78%;
				position: absolute;
				left: 50%;
				top: 14%;
				transform: translateX(-50%)
			}
			
			.neirong img {
				width: 100%;
			}
			
			.chakanpaiming {
				display: none;
				background: url(img/Mc_bg_rank.png)no-repeat;
				background-size: cover;
				width: 90%;
				height: 76%;
				position: absolute;
				top: 10%;
				left: 5%;
			}
			
			ul {
				position: absolute;
				bottom: 4%;
				left: 50%;
				transform: translateX(-50%);
			}
			
			li {
				list-style: none;
				float: left;
				font-size: 45px;
				display: inline-block;
				width: 90px;
				height: 90px;
				background: #bf9a80;
				border-radius: 50%;
				text-align: center;
				line-height: 90px;
				color: white;
				margin-right: 20px;
			}
			
			.oneQi {
				display: none;
			}
			
			.oneQi1 {
				display: block;
				width: 170px;
				height: 90px;
				border-radius: 100px;
				background: #097c25;
			}
			
			.twoQi {}
			
			.twoQi1 {
				display: none;
				width: 170px;
				height: 90px;
				border-radius: 100px;
				background: #097c25;
			}
			
			.threeQi {}
			
			.threeQi1 {
				display: none;
				width: 170px;
				height: 90px;
				border-radius: 100px;
				background: #097c25;
			}
			
			.overMask {
				display: none;
				position: absolute;
				top: 0;
				z-index: 100;
			}
			
			.bjBlack {
				/*display:none;*/
				width: 100%;
				height: 100%;
				background: black;
				/*position:absolute;*/
				z-index: 9;
				opacity: 0.6;
			}
			
			.bjBlackTwo {
				display: none;
				width: 100%;
				height: 100%;
				background: black;
				position: absolute;
				top: 0;
				z-index: 100;
				opacity: 0.8;
			}
			
			.xinyun {
				width: 100%;
				position: absolute;
				top: 0%;
				z-index: 10 opacity:1;
			}
			
			.xinyun img {
				width: 100%;
			}
			
			.libao {
				width: 10%;
				position: absolute;
				top: 60%;
				left: 15%
			}
			
			.libao img {
				width: 100%;
			}
			
			.fenxiang {
				width: 60%;
				position: absolute;
				top: 58%;
				left: 29%;
			}
			
			.fenxiang img {
				width: 100%;
			}
			
			.zailaiyici {
				width: 15%;
				position: absolute;
				top: 75%;
				left: 20%;
			}
			
			.zailaiyici img {
				width: 100%;
			}
			
			.chapaiming {
				width: 16%;
				position: absolute;
				top: 76%;
				right: 20%;
			}
			
			.chapaiming img {
				width: 100%;
			}
			
			.defen {
				position: absolute;
				top: 38%;
				left: 50%;
				transform: translateX(-50%);
				font-size: 150px;
				color: red;
				font-weight: bold;
			}
			
			.dianji {
				width: 20%;
				position: absolute;
				top: 62%;
				right: 24%;
				animation: shan 1s infinite;
			}
			
			.dianji img {
				width: 100%;
			}
			
			@keyframes shan {
				0% {
					opacity: 1;
				}
				50% {
					opacity: 0.5;
				}
				100% {
					opacity: 1;
				}
			}
			
			.xiaoren {
				display: none;
				width: 50%;
				position: absolute;
				top: 0;
				right: 6%;
				z-index: 999;
			}
			
			.xiaoren img {
				width: 100%;
			}
			
			.guanggao {
				display: none;
				width: 85%;
				position: absolute;
				bottom: 3%;
				left: 50%;
				transform: translateX(-50%);
				z-index: 999;
			}
			
			.guanggao img {
				width: 100%;
			}
			
			.qipao {
				width: 300px;
				/*height:300px;*/
				animation: qp infinite 0.5s;
			}
			
			@keyframes qp {
				20% {
					background: url(img/Ani_ball1.png)no-repeat
				}
				40% {
					background: url(img/Ani_ball2.png)no-repeat
				}
				60% {
					background: url(img/Ani_ball3.png)no-repeat
				}
				80% {
					background: url(img/Ani_ball4.png)no-repeat
				}
				100% {
					background: url(img/Ani_ball5.png)no-repeat
				}
			}
			
			.d1 {
				width: 300px;
				height: 300px;
				position: absolute;
				right: -10%;
				animation: d11 infinite 5s;
			}
			
			.d1 img {
				width: 100%;
				height: 100%;
			}
			
			@keyframes d11 {
				0% {
					right: -10%;
					top: 0
				}
				33% {
					right: -11%;
					top: 2%
				}
				66% {
					right: -9%;
					top: 1%
				}
				100% {
					right: -10%;
					top: 0
				}
			}
			
			.d2 {
				width: 150px;
				height: 150px;
				position: absolute;
				top: 26%;
				left: -10%;
				animation: d22 infinite 5s;
			}
			
			.d2 img {
				width: 100%;
				height: 100%;
			}
			
			@keyframes d22 {
				0% {
					left: -10%;
					top: 26%
				}
				33% {
					left: -11%;
					top: 27%
				}
				66% {
					left: -9%;
					top: 27%
				}
				100% {
					left: -10%;
					top: 26%
				}
			}
			
			.d3 {
				width: 300px;
				height: 300px;
				position: absolute;
				top: 70%;
				left: -10%;
				animation: d33 infinite 5s;
			}
			
			.d3 img {
				width: 100%;
				height: 100%;
			}
			
			@keyframes d33 {
				0% {
					left: -10%;
					top: 70%
				}
				33% {
					left: -11%;
					top: 71%
				}
				66% {
					left: -12%;
					top: 71%
				}
				100% {
					left: -10%;
					top: 70%
				}
			}
			
			.d4 {
				width: 250px;
				height: 250px;
				position: absolute;
				top: 55%;
				right: -10%;
				animation: d44 infinite 5s;
			}
			
			.d4 img {
				width: 100%;
				height: 100%;
			}
			
			@keyframes d44 {
				0% {
					right: -10%;
					top: 55%
				}
				33% {
					right: -11%;
					top: 56%
				}
				66% {
					right: -12%;
					top: 56%
				}
				100% {
					right: -10%;
					top: 55%
				}
			}
		</style>
	</head>

	<body>
		<!--开始游戏界面-->
		<div class="start">
			<div class="d1"><img src="img/Mc_ball2.png" /></div>
			<div class="logo"><img src="img/Mc_logo.png"></div>
			<div class="jingxi"><img src="img/Mc_tit_open.png"></div>
			<div class="haixing"><img src="img/Mc_fish2.png"></div>
			<div class="jingyu"><img src="img/Mc_fish1.png"></div>
			<div class="shuimu"><img src="img/Mc_fish3.png"></div>
			<div class="kaishi"><img src="img/Btn_start.png"></div>
			<div class="guize"><img src="img/Btn_rule2.png"></div>
			<div class="paiming"><img src="img/Btn_rank2.png"></div>
			<div class="d2"><img src="img/Mc_ball3.png"></div>
			<div class="d3"><img src="img/Mc_ball1.png"></div>
			<div class="d4"><img src="img/Mc_ball4.png"></div>
			<div class="guizeMask">
				<div class="close">
					<img src="img/Btn_close2.png" />
				</div>
				<div class="neirong">
					<img src="img/Mc_rule.png" />
				</div>
			</div>
			<div class="chakanpaiming">
				<div class="close1">
					<img src="img/Btn_close1.png" />
				</div>
				<div class="pmNR">
					<div class="rongqi">
						<div class="qi1">
							<!--<span>1</span>
							<img src="img/pic.png">
							<p>小夜曲</p>
							<span>999</span>-->
						</div>
						<div class="qi2">

						</div>
						<div class="qi3">

						</div>
					</div>
					<ul>
						<li class="oneQi">1</li>
						<li class="oneQi1">1期</li>

						<li class="twoQi">2</li>
						<li class="twoQi1">2期</li>

						<li class="threeQi">3</li>
						<li class="threeQi1">3期</li>
					</ul>
				</div>
			</div>
		</div>
		<!--选英雄界面-->
		<div class="two">
			<div class="man1"><img src="img/Mc_bg_player2.png"></div>
			<div class="woman1"><img src="img/Mc_bg_player1.png"></div>
			<div class="man"><img src="img/Btn_player2.png"></div>
			<div class="woman"><img src="img/Btn_player1.png"></div>
			<div class="zhantai"><img src="img/Mc_stage.png"></div>
			<div class="play"><img src="img/Btn_play.png"></div>
		</div>
		<!--游戏界面-->
		<div class="web">
			<div class="timeLeft">
				<span class="tim">0</span>
			</div>
			<div class="scoreRight">
				<span class="sc">0</span>
			</div>
			<div class="person">
				<img class="person1" src="img/Mc_player1.png">
			</div>
			<!--游戏结束界面-->
			<div class="overMask">
				<div class="bjBlack"></div>

				<div class="xinyun">
					<img src="img/Mc_over.png" />
				</div>
				<div class="libao">
					<img src="img/Mc_prize.png" />
				</div>
				<div class="fenxiang">
					<img src="img/Mc_txt_over.png" />
				</div>
				<div class="zailaiyici">
					<img src="img/Btn_again.png" />
				</div>
				<div class="chapaiming">
					<img src="img/Btn_rank.png" />
				</div>
				<div class="dianji">
					<img src="img/Mc_hand.png" />
				</div>
				<div class="defen">100</div>
				<div class="bjBlackTwo"></div>
				<div class="xiaoren">
					<img src="img/Mc_arrow.png" />
				</div>
				<div class="guanggao">
					<img src="img/Mc_share.png" />
				</div>
				<div class="chakanpaiming">
					<div class="close1">
						<img src="img/Btn_close1.png" />
					</div>
					<div class="pmNR">
						<div class="rongqi">
							<div class="qi1">
								<!--<span>1</span>
							<img src="img/pic.png">
							<p>小夜曲</p>
							<span>999</span>-->
							</div>
							<div class="qi2">

							</div>
							<div class="qi3">

							</div>
						</div>
						<ul>
							<li class="oneQi">1</li>
							<li class="oneQi1">1期</li>

							<li class="twoQi">2</li>
							<li class="twoQi1">2期</li>

							<li class="threeQi">3</li>
							<li class="threeQi1">3期</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script>
			//////////////////////////////////////////////////////////////////////
			//首页
			//开始游戏
			$(".kaishi").on("click", function() {
				$(".start").css("display", "none");
				$(".two").css("display", "block")
			})
			$(".guize").on("click", function() {
				$(".guizeMask").css("display", "block");

			})
			$(".paiming").on("click", function() {
				$(".chakanpaiming").css("display", "block")
			})

			$(".close").on("click", function() {
				$(".guizeMask").css("display", "none")
			})
			$(".close1").on("click", function() {
				$(".chakanpaiming").css("display", "none")
			})
			//排名
			$(".oneQi").on("click", function() {
				$(".oneQi").css("display", "none");
				$(".oneQi1").css("display", "block");
				$(".twoQi").css("display", "block");
				$(".twoQi1").css("display", "none");
				$(".threeQi").css("display", "block");
				$(".threeQi1").css("display", "none");
			})
			$(".twoQi").on("click", function() {
				$(".oneQi").css("display", "block");
				$(".oneQi1").css("display", "none");
				$(".twoQi").css("display", "none");
				$(".twoQi1").css("display", "block");
				$(".threeQi").css("display", "block");
				$(".threeQi1").css("display", "none");
			})
			$(".threeQi").on("click", function() {
				$(".oneQi").css("display", "block");
				$(".oneQi1").css("display", "none");
				$(".twoQi").css("display", "block");
				$(".twoQi1").css("display", "none");
				$(".threeQi").css("display", "none");
				$(".threeQi1").css("display", "block");
			})

			/////////////////////////////////////////////////////////////////////
			//选英雄界面
			$(".man").on("click", function() {
				$(".man1").css("opacity", "1");
				$(".woman1").css("opacity", "0");
				$(".man").addClass("renwu")
				$(".woman").removeClass("renwu")
				$(".person1").attr('src',"img/Mc_player2.png"); 
			})
			$(".woman").on("click", function() {
				$(".woman1").css("opacity", "1");
				$(".man1").css("opacity", "0");
				$(".woman").addClass("renwu")
				$(".man").removeClass("renwu")
				$(".person1").attr('src',"img/Mc_player1.png"); 
			})
			$(".play").on("click", function() {
				addAni()
			})

			//创建动物并下落
			//			var time = 10;
			function addAni() {
				if($(".man").is(".renwu") || $(".woman").is(".renwu")) {
					$(".two").css("display", "none");
					$(".web").css("display", "block");
					//定时创建动物
					var setAni = setInterval(function() {
						ranAnimal();
					}, 1000)
					var collisionSet;
					setTimeout(function() {
						collisionSet = setInterval(function() {
							if(isOverlap("person", "aniClass")) {
								//												console.log("碰撞了")
								var fenshu = $(".aniClass").eq(0).data("scor");
								$(".aniClass").eq(0).remove();
								zongfen = zongfen + fenshu;
								if(zongfen < 0) {
									zongfen = 0;
								}
								$(".sc").text(zongfen)
								//碰撞产生气泡
								$(".qipao").animate({
									"height": "300"
								}, 1000, function() {
									$(".qipao").animate({
										"height": "0"
									}, 1)
								})

							}
						}, 1)
					}, 1000)

					var time = 60;
					var timeOver = setInterval(function() {
						time--;
						if(time == 0) {
							clearInterval(setAni);
							clearInterval(timeOver)
							clearInterval(collisionSet)
							$(".overMask").css("display", "block")
						}
						$(".tim").text(time)
					}, 1000)
				} else {

					var tXT = 0;
					var twoXunhuan = setInterval(function() {
						tXT++;
						if(tXT == 3) {
							clearInterval(twoXunhuan)
						}

						$(".man1").animate({
							"opacity": "1"
						}, 200, "linear", function() {
							$(".man1").animate({
								"opacity": "0"
							}, 200, "linear")
						})
						$(".woman1").animate({
							"opacity": "1"
						}, 200, "linear", function() {
							$(".woman1").animate({
								"opacity": "0"
							}, 200, "linear")
						})

					}, 210)

				}
			}

			$(".chapaiming").on("click", function() {
				$(".chakanpaiming").css("display", "block")
			})
			$(".fenxiang").on("click", function() {
				$(".bjBlackTwo").css("display", "block")
				$(".xiaoren").css("display", "block");
				$(".guanggao").css("display", "block")
			})
			$(".bjBlackTwo").on("click", function() {
				$(".bjBlackTwo").css("display", "none")
				$(".xiaoren").css("display", "none");
				$(".guanggao").css("display", "none")
			})

			//再来一局
			$(".zailaiyici").on("click", function() {
				$(".overMask").css("display", "none")
				addAni()
				zongfen = 0;
				$(".sc").text("0")
			})

			//游戏界面
			/////////////////////////////////////////////////////////////////////
			//获取屏幕宽高，并设置给web
			var sHeight = $(document).height()
			var sWidth = $(document).width();
			$(".start").css({
				"width": sWidth,
				"height": sHeight
			})
			$(".web").css({
				"width": sWidth,
				"height": sHeight
			})
			$(".two").css({
				"width": sWidth,
				"height": sHeight
			})
			$(".overMask").css({
				"width": sWidth,
				"height": sHeight
			})

			//创建数组对象
			var animals = [{
				"name": "yellowWhale", //黄鲸鱼
				"height": "250", //高
				"width": "250", //宽
				"background": "url(img/yellowWhale.png)no-repeat",
				"scor": 200, //分数
				"src": "img/yellowWhale.png"

			}, {
				"name": "blueWhale", //蓝鲸鱼
				"height": "200",
				"width": "200",
				"background": "url(img/blueWhale.png)no-repeat",
				"scor": 100,
				"src": "img/blueWhale.png"
			}, {
				"name": "squid", //鱿鱼	
				"height": "150",
				"width": "150",
				"background": "url(img/squid.png)no-repeat",
				"scor": -50
			}, {
				"name": "Piranha", //食人鱼
				"height": "100",
				"width": "100",
				"background": "url(img/Piranha.png)no-repeat",
				"scor": 50
			}, {
				"name": "Starfish", //海星
				"height": "100",
				"width": "100",
				"background": "url(img/Mc_element1.png)no-repeat",
				"scor": -50,
				"src": "img/Mc_element1.png"
			}]
			//随机创建一个动物

			var zongfen = 0; //设置总分
			function ranAnimal() {
				var num = Math.floor(Math.random() * 5);
				var sleft = Math.floor(Math.random() * sWidth); //创建头部随机距离屏幕左端的距离
				var sBleft = Math.floor(Math.random() * sWidth); //创建尾部随机距离屏幕左端的距离
				var ani = $("<div>");
				ani.addClass("aniClass");
				ani.attr("data-scor", animals[num].scor)
				ani.addClass(animals[num].name);
				if(sleft - animals[num].width < 0) {
					sleft = sleft;
				} else {
					sleft = sleft - animals[num].width
				}
				if(sBleft - animals[num].width < 0) {
					sBleft = sBleft;
				} else {
					sBleft = sBleft - animals[num].width
				}
				ani.css({
					"width": animals[num].width,
					"height": animals[num].height,
					"background": animals[num].background,
					"background-size": "cover",
					"position": "absolute",
					"left": sleft,
					"top": -animals[num].height
				})
				dropSpeed(4000);
				//气泡下落速度
				function dropSpeed(t) {
					ani.animate({
						top: sHeight,
						left: sBleft
					}, t, function() {
						$(this).remove();
					})
				}

				$(".web").append(ani)

				$(".defen").text(zongfen)
			}

			//控制人物
			$('.person').bind('touchmove', function(e) {
				e.preventDefault();
				var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
				var elm = $(this).offset();
				var x = touch.pageX - elm.left / 2;
				$(this).css('left', x + 'px');
				if(x > sWidth - 300) {
					$(this).css('left', sWidth - 300 + 'px');
				} else if(x < -40) {
					$(this).css('left', -40 + 'px');
				}
			});

			//判断重叠
			function isOverlap(idOne, idTwo) {
				var objOne = $("." + idOne),
					objTwo = $("." + idTwo),
					offsetOne = objOne.offset(),
					offsetTwo = objTwo.offset(),
					topOne = offsetOne.top,
					topTwo = offsetTwo.top,
					leftOne = offsetOne.left,
					leftTwo = offsetTwo.left,
					widthOne = objOne.width(),
					widthTwo = objTwo.width(),
					heightOne = objOne.height(),
					heightTwo = objTwo.height();
				var leftTop = leftTwo > leftOne && leftTwo < leftOne + widthOne &&
					topTwo > topOne && topTwo < topOne + heightOne,
					rightTop = leftTwo + widthTwo > leftOne && leftTwo + widthTwo < leftOne + widthOne &&
					topTwo > topOne && topTwo < topOne + heightOne,
					leftBottom = leftTwo > leftOne && leftTwo < leftOne + widthOne &&
					topTwo + heightTwo > topOne && topTwo + heightTwo < topOne + heightOne,
					rightBottom = leftTwo + widthTwo > leftOne && leftTwo + widthTwo < leftOne + widthOne &&
					topTwo + heightTwo > topOne && topTwo + heightTwo < topOne + heightOne;
				//				console.log(leftTop, rightTop, leftBottom, rightBottom)
				return leftTop || rightTop || leftBottom || rightBottom;

			}
		</script>
	</body>

</html>